<template>
	<view>
		<view class="head">
			<view class="arrow" @click="return_btn">
			</view>
			<text style="color: white; font-size: 48rpx;">维修任务</text>
			<view>
				<u--input customStyle="background-color: white; width: 80vw;position: absolute;left: 8% ;top:130rpx; "
					placeholder="输入要搜索的内容" shape="circle" clearable></u--input>
				<view style="position: absolute; top: 143rpx; left: 610rpx;">
					<image src="/static/images/ys/hexiaojilu/search.png" style="width: 50rpx;height: 50rpx"></image>
				</view>
			</view>
			<view class="tiaojiansousuo">
				<view>共3条</view>
				<view>
					<view>状态</view>
					<view
						style="margin-top: 10rpx; background-color: #0459D8; border-radius: 15rpx 15rpx 15rpx 15rpx; height: 40rpx;width: 130rpx;">
						<text>全部</text>
						<image src="/static/images/ys/weixiurenwu/arrow.png"
							style="margin-left: 10rpx; width: 30rpx;height: 20rpx;"></image>
					</view>
				</view>
				<view>
					<view>维修方式</view>
					<view
						style="margin-top: 10rpx; background-color: #0459D8; border-radius: 15rpx 15rpx 15rpx 15rpx; height: 40rpx;width: 130rpx;">
						全部<image src="/static/images/ys/weixiurenwu/arrow.png"
							style="margin-left: 10rpx; width: 30rpx;height: 20rpx;"></image>
					</view>
				</view>
				<view><uni-datetime-picker><uni-icons type="calendar" color="white" size="18"></uni-icons>
						日期</uni-datetime-picker></view>
			</view>
			<uni-card style="text-align: left;">
				<view style="display: flex;justify-content:space-between;">
					<view style="font-weight: bold;">维修单号：3535252</view>
					<view style="color:#548FEF ;">进行中</view>
				</view>
				<view style="border: 4rpx solid #F7F7F7; margin: 10rpx 0;"></view>
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<view>
						<view>维修方式：到店维修</view>
						<view style="margin: 10rpx 0;">预约方式：2023-03-18 11:00</view>
					</view>
					<view>
						<u-button type="primary" shape="circle" customStyle="background-color: #0459D8;width: 180rpx;"
							size="small" text="查看详情" @click="detail_btn"></u-button>
					</view>
				</view>
			</uni-card>
			<uni-card style="text-align: left;">
				<view style="display: flex;justify-content:space-between;">
					<view style="font-weight: bold;">维修单号：3535252</view>
					<view style="color:#548FEF ;">已完成</view>
				</view>
				<view style="border: 4rpx solid #F7F7F7; margin: 10rpx 0;"></view>
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<view>
						<view>维修方式：上门取车</view>
						<view style="margin: 10rpx 0;">预约方式：2023-03-18 11:00</view>
					</view>
					<view>
						<u-button type="primary" shape="circle" customStyle="background-color: #0459D8;width: 180rpx;"
							size="small" text="查看详情"></u-button>
					</view>
				</view>
			</uni-card>
			<uni-card style="text-align: left;">
				<view style="display: flex;justify-content:space-between;">
					<view style="font-weight: bold;">维修单号：3535252</view>
					<view style="color:#548FEF ;">已完成</view>
				</view>
				<view style="border: 4rpx solid #F7F7F7; margin: 10rpx 0;"></view>
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<view>
						<view>维修方式：上门取车</view>
						<view style="margin: 10rpx 0;">预约方式：2023-03-18 11:00</view>
					</view>
					<view>
						<u-button type="primary" shape="circle" customStyle="background-color: #0459D8;width: 180rpx;"
							size="small" text="查看详情"></u-button>
					</view>
				</view>
			</uni-card>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			return_btn() {
				uni.$u.route('/pages/lzx/business/homePage');
			},
			detail_btn() {
				uni.$u.route('/pages/ys/weixiurenwu2/weixiurenwu2');
			}
		}
	}
</script>

<style>
	.tiaojiansousuo {
		color: white;
		margin-top: 120rpx;
		display: flex;
		justify-content: space-around;
	}

	.arrow {
		height: 28rpx;
		width: 28rpx;
		border-top: 4rpx solid white;
		border-right: 4rpx solid white;
		transform: rotate(225deg);
		position: fixed;
		left: 3vw;
		top: 4vh;
	}

	.head {
		position: relative;
		padding-top: 4vh;
		text-align: center;
		height: 35vh;
		width: 100%;
		background-color: #2F81FA;
	}
</style>